<template>
  <figure ref="videoContainer" data-fullscreen="false">
    <video ref="video" autoplay>
      Your browser is too old which doesn't support HTML5 video.
    </video>
    <ul class="controls">
      <li class="controls-label">国网河南省电力公司</li>
      <ul class="controls-btns">
        <li>
          <span @click="handleFix"><i class="el-icon-orange"/></span>
        </li>
        <li>
          <span @click="handleFullscreen"><i class="el-icon-full-screen"/></span>
        </li>
      </ul>
    </ul>
    <div class="camera" @click.stop="handleCamera"><i class="el-icon-camera" /></div>
    <div v-show="showBarrage" class="barrage">
      <el-input v-model="barrage" size="small">
        <el-button slot="append" size="small">确认</el-button>
      </el-input>
    </div>

    <el-dialog title="添加快照" :visible.sync="showDialog">
      <div>
        <span>请输入快照原因</span>
      </div>
    </el-dialog>
  </figure>
</template>

<script>
import flvjs from 'flv.js'
export default {
  data() {
    return {
      barrage: '',
      showBarrage: false,
      showDialog: false
    }
  },

  mounted() {
    this.$nextTick(() => {
      if (flvjs.isSupported()) {
        const flvPlayer = flvjs.createPlayer({
          type: 'flv',
          isLive: true,
          url: 'http://39.100.227.141:12345/live?port=11935&app=live&stream=test'
        })
        flvPlayer.attachMediaElement(this.$refs.video)
        flvPlayer.load()
        setTimeout(() => {
          flvPlayer.play()
        }, 150)
      }
    })

    // Listen for fullscreen change events (from other controls, e.g. right clicking on the video itself)
    document.addEventListener('fullscreenchange', e => {
      this.setFullscreenData(!!(document.fullScreen || document.fullscreenElement))
    })
    document.addEventListener('webkitfullscreenchange', () => {
      this.setFullscreenData(!!document.webkitIsFullScreen)
    })
    document.addEventListener('mozfullscreenchange', () => {
      this.setFullscreenData(!!document.mozFullScreen)
    })
    document.addEventListener('msfullscreenchange', () => {
      this.setFullscreenData(!!document.msFullscreenElement)
    })
  },

  methods: {
    // controls
    handleCamera() {
      console.log('handle camera')
      // this.showBarrage = true
      this.showDialog = true
    },
    handleFix() {
      console.log('handle fix')
    },
    handleFullscreen() {
      // If fullscreen mode is active...
      if (this.isFullScreen()) {
        // ...exit fullscreen mode
        // (Note: this can only be called on document)
        if (document.exitFullscreen) document.exitFullscreen()
        else if (document.mozCancelFullScreen) document.mozCancelFullScreen()
        else if (document.webkitCancelFullScreen) document.webkitCancelFullScreen()
        else if (document.msExitFullscreen) document.msExitFullscreen()
        this.setFullscreenData(false)
      } else {
        this.$refs.videoContainer.webkitRequestFullScreen()
        this.setFullscreenData(true)
      }
    },
    // Checks if the document is currently in fullscreen mode
    isFullScreen() {
      return !!(
        document.fullScreen ||
        document.webkitIsFullScreen ||
        document.mozFullScreen ||
        document.msFullscreenElement ||
        document.fullscreenElement
      )
    },
    setFullscreenData(state) {
      this.showBarrage = false
      this.$refs.videoContainer.setAttribute('data-fullscreen', !!state)
    }
  }
}
</script>

<style scoped lang="scss">
figure {
  position: relative;
  background-color: #666;
}

figure::before {
  display: block;
  content: '';
  width: 100%;
  padding-bottom: 56.25%;
}
video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;

  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
}

/* controls */
.controls,
.controls li {
  padding: 0;
  margin: 0;
}
.controls {
  position: absolute;
  top: 0;
  width: 100%;
  line-height: 30px;
  display: block;
  list-style-type: none;
  overflow: hidden;
  color: #fff;
  background: #0e0b0b87;

  li {
    float: left;
    cursor: pointer;
  }
}

.controls-label {
  margin-left: 10px;
  width: 160px;
}

.controls-btns {
  position: absolute;
  right: 0;
  list-style-type: none;

  li {
    margin-right: 10px;
  }
}

/* fullscreen */
html:-ms-fullscreen {
  width: 100%;
}
:-webkit-full-screen {
  background: #666;
}
figure[data-fullscreen='true'] {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  /* hide controls on fullscreen with WebKit */
  video::-webkit-media-controls {
    display: none !important;
  }
}

.camera {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 70px;
  line-height: 70px;
  text-align: center;
  color: #fff;
  font-size: 42px;
  cursor: pointer;
}

.barrage {
  position: absolute;
  bottom: 10px;
  width: 200px;
  display: none;
}
figure[data-fullscreen='true'] .barrage {
  display: block;
}
</style>
